<template>
  <el-form class="drawer-multiColumn-form" label-width="100px" ref="formRef" :rules="rules" :model="autoImportTableInfo">
    <el-row :gutter="1">
      <el-col :span="10">
        <el-form-item label="表名" prop="schemaName">
          <el-select v-model="autoImportTableInfo.schemaName" @click="schemaNamesLoad" clearable filterable placeholder="选择库">
            <el-option v-for="item in schemaNamesRef" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item prop="tableName" label-width="0px">
          <el-select
            v-model="autoImportTableInfo.tableName"
            :disabled="!autoImportTableInfo.schemaName"
            @click="tableNamesLoad"
            clearable
            filterable
            placeholder="选择表"
          >
            <el-option v-for="item in tableNamesRef" :key="item.code" :label="`${item.name}-${item.code}`" :value="item.code" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-button :icon="EditPen" @click="emit('switchAddType')">手动输入</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts" name="autoImportTableInfoForm">
import { reactive, ref } from "vue";
import { API } from "@/api/modules/dwh/typings";
import { tableInfoController } from "@/api/modules/dwh";
import { EditPen } from "@element-plus/icons-vue";

const props = defineProps<{
  dataSource: string;
}>();
const emit = defineEmits<{
  (event: "success"): void;
  (event: "switchAddType"): void;
}>();

const rules = reactive({
  schemaName: [{ required: true, message: "请选择库" }],
  tableName: [{ required: true, message: "请选择表" }]
});
const autoImportTableInfo = reactive({
  schemaName: "",
  tableName: ""
});

const schemaNamesRef = ref<string[]>([]);

const schemaNamesLoad = async () => {
  let result = await tableInfoController.listSchemaByDataSourceUsingGET({ val: props.dataSource });
  schemaNamesRef.value = result.data;
};

const tableNamesRef = ref<API.SchemaTableInfoVo[]>([]);
const tableNamesLoad = async () => {
  let result = await tableInfoController.listTablesBySchemaNameUsingPOST({
    dataSourceName: props.dataSource,
    schemaName: autoImportTableInfo.schemaName
  });
  tableNamesRef.value = result.data;
};

defineExpose({
  autoImportTableInfo
});
</script>
